<style lang="scss">
.app-apps {
  position: relative;

  .example-path {
    > span {
      cursor: pointer;
      margin-right: 5px;
    }
  }
  .user-path {
    > span {
      cursor: pointer;
    }
  }
  .panel-group {
    > section {
      margin-bottom: 10px;
    }
  }
  .search-box {
    .input-group {
      .input-group-addon {
        cursor: pointer;
        &:hover {
          background: #f7f7f7;
        }
      }
      position: relative;
      .other-dir {
        // background: #eee;
        position: absolute;
        top: 34px;
        left: 0;
        max-height: 200px;
        width: 100%;
        z-index: 3;
        max-height: 300px;
        overflow: auto;
        .list-group-item {
          padding: 6px 15px;
        }
      }
    }
  }
}
</style>

<template>
  <section class="app-apps">
    <loading v-bind:loading.sync="status.loading"></loading>
    <div class="row">
      <div class="col-xs-12">
        <p class="example-path">
          常用目录:
          <span class="text-success" v-for="(item, index) in example" :key="index" v-on:click="setDir(item.path)">{{item.title}}</span>
        </p>
      </div>
    </div>
    <div class="row">
      <!-- <div class="col-xs-12"><p>{{status}}</p></div> -->
      <div class="col-xs-12 margin-10 search-box">
        <div class="input-group">
          <div class="input-group-addon" v-for="(dir, index) in dirArr" :key="index" v-on:click="showOtherDir(dir)">
            <i class="fa fa-spinner fa-pulse" v-if="dir.loading"></i>
            {{dir.name}}/
          </div>
          <input type="text" class="form-control" v-model="status.search" placeholder="搜索应用名称">
          <div class="input-group-btn">
            <button id="genpassword" class="btn btn-success" type="button" v-on:click="init">
              <i class="fa fa-refresh"></i>
            </button>
          </div>
          <div class="other-dir" v-if="otherDir.length">
            <div class="list-group">
              <a href="javascript:;" v-on:click="setDir(path)" class="list-group-item" v-for="(path, index) in otherDir" :key="index">
                <i class="fa fa-folder"></i>
                {{path}}
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 margin-10">
        <div class="pull-right">
          <button class="btn-default btn btn-xs margin-right-5" @click="toggleSort(status.orderBy)">
            <i class="fa" v-bind:class="orderIcon"></i>
          </button>
          <div class="btn-group btn-group-xs">
            <button class="btn-default btn" v-bind:class="{active:status.order=='name'}" v-on:click="status.order='name'">默认</button>
            <button class="btn-default btn" v-bind:class="{active:status.order=='atimeMs'}" v-on:click="status.order='atimeMs'">访问时间</button>
            <button class="btn-default btn" v-bind:class="{active:status.order=='mtimeMs'}" v-on:click="status.order='mtimeMs'">修改时间</button>
            <button class="btn-default btn" v-bind:class="{active:status.order=='birthtimeMs'}" v-on:click="status.order='birthtimeMs'">创建时间</button>
          </div>
        </div>
        <span class="text-muted">总计:</span>
        <span>{{status.count}}</span>
        <!-- <button class="btn btn-default" v-on:click="test">测试</button> -->
        <span class="clearfix"></span>
      </div>
    </div>
    <div class="panel panel-default" v-if="status.count==0">
      <div class="panel-body center-block" style="text-align: center;">未找到 app</div>
    </div>
    <div class="panel-group" v-if="apps.length>0">
      <section v-for="(app) in sort(search(apps,status.search),status.order,status.orderBy)" :key="app.uuid">
        <app-item v-bind:status="status" v-bind:app="app"></app-item>
      </section>
    </div>
  </section>
</template>

<script>
const os = require("../util/os"),
  conf = require("../config"),
  ruleconfig = require("../rules"),
  tool = require("../util/tool"),
  store = require("store");
module.exports = {
  data: () => {
    return {
      //静态属性
      apps: [],
      dir: ruleconfig.apppath ? ruleconfig.apppath : "/",
      dirArr: [],
      otherDir: [],
      example: conf.example,
      status: {
        visit: store.get("visit"),
        search: "",
        order: "name",
        orderBy: "asc",
        count: 0,
        loading: true,
        title: "Mac优化工具 Example page header"
      }
    };
  },
  computed: {
    //计算属性
    orderIcon: function() {
      return {
        "fa-sort-amount-desc": this.status.orderBy == "desc",
        "fa-sort-amount-asc": this.status.orderBy == "asc"
      };
    }
  },
  components: {
    //组件
  },
  methods: {
    test: function() {
      tool.msg("怎么了");
      tool
        .confirm({
          title: "警告!",
          desc: "删除文件:",
          type: "danger"
        })
        .then(
          function(item) {
            console.log("确定", item);
          },
          function(err) {
            console.log("取消", err);
          }
        );
    },
    msg: function() {
      tool.msg("怎么了");
    },
    toggleSort: function(sort) {
      this.status.orderBy = sort == "desc" ? "asc" : "desc";
      console.log("sort", sort, this.status.orderBy);
    },
    sort: function(arrays, key, type) {
      this.status.count = arrays.length;
      if (arrays.length && key && type) {
        var temp;
        switch (type) {
          case "desc":
            temp = arrays.sort((a, b) => a[key] - b[key]).reverse();
            break;
          default:
            temp = arrays.sort((a, b) => a[key] - b[key]);
            break;
        }
        return temp;
      }
      return arrays;
    },
    search: function(apps, search) {
      return apps.filter(function(app) {
        if (search) {
          //检索过滤
          search = search.toLowerCase();
          if (app.name.toLowerCase().indexOf(search) > -1) {
            return true;
          } else {
            return false;
          }
        } else {
          return true;
        }
      });
    },
    loading: function() {
      this.status.loading = true;
      console.log("loading", this.status.loading);
    },
    showOtherDir: function(dir) {
      if (this.otherDir.length) {
        this.otherDir = [];
      } else {
        this.otherDir = dir.dirs;
      }
    },
    setDir: function(dir) {
      this.dir = tool.userpath(dir);
      this.init();
    },
    init: function() {
      var that = this;
      console.log("apps init:", ruleconfig);
      that.status.loading = true;
      this.apps = [];
      this.dirArr = [];
      this.otherDir = [];
      tool.parseDirArr(that.dir, this.dirArr);
      console.log("路径组", this.dirArr);
      tool.searchApp(that.dir, true).then(
        function(apps) {
          apps.forEach(app => {
            that.apps.push(Object.assign({}, app));
          });
          console.log("App 列表", that.apps);
          tool.msg(`搜索 App完成`, "success");
          that.status.loading = false;
        },
        function(err) {
          console.log("查询错误", err.message);
          tool.msg(`搜索 APP错误:${err.message}`, "danger");
        }
      );
      console.log("xinit", this);
    }
  },
  // beforeCreate: function () {
  //     console.group('beforeCreate 创建前状态===============》', this);
  //     console.log("%c%s", "color:red", "el     : ", this.$el); //undefined
  //     console.log("%c%s", "color:red", "data   : ", this.$data); //undefined
  // },
  // created: function () {
  //   console.group('created 创建完毕状态===============》');
  //   console.log("%c%s", "color:red", "el     : ", this.$el); //undefined
  //   console.log("%c%s", "color:red", "data   : ", this.$data); //已被初始化
  // },
  // beforeMount: function () {
  //     console.group('beforeMount 挂载前状态===============》');
  //     console.log("%c%s", "color:red", "el     : ", this.$el); //已被初始化
  //     console.log("%c%s", "color:red", "data   : ", this.$data); //已被初始化
  // },
  mounted: function() {
    console.group("mounted 挂载结束状态===============》");
    console.log("%c%s", "color:red", "el     : ", this); //已被初始化
    // console.log("%c%s", "color:red", "data   : ", this.$data); //已被初始化
    this.init();
  },
  template: `__template__` //必须是单引号 模板替换标识可在配置内更改
};
</script>
